$(function () {
    //需求1：初始化文章分类列表
    initArtCateList();
    let layer = layui.layer;
    let form = layui.form;
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.messsage);
            }
            //渲染
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            });
            //循环完毕之后赋值
            let str = arr.join('');
            // console.log(str);
            $('[name=cate_id').empty().html(str);
            //所有标签，所有表单全部重新渲染layui中的select/checkbox/radio
            form.render();
        })
    }
    // 初始化富文本编辑器
    initEditor();

    //需求3：初始化文章封面
    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options);

    //需求4：定义状态
    let state = '';
    $("#btn1").on('click', function () {
        state = '已发布';
    })
    $("#btn2").on('click', function () {
        state = '草稿';
    })

    //需求6： 选择图片，渲染图片
    $("#chooseImageBtn").on('click', function () {
        $("#chooseImageInp").click();
    })
    $("#chooseImageInp").on('change', function () {
        //拿到用户选择的文件
        let file = this.files[0];
        if (file ===  undefined) {
            return layer.msg('请选择文章封面');
        }
        //根据选择的文件，创建一个对应的URL地址
        let newImgURL= URL.createObjectURL(file);
        //销毁旧的裁剪区域，在重新设置图片路径，之后再创建
        $image
            .cropper('destroy')
            .attr('src', newImgURL)
            .cropper(options)
    })

    $('#formPub').on('submit', function (e) {
        e.preventDefault();
        let fd = new FormData(this);
        //添加文章状态
        fd.append('state', state);
        // console.log(...fd);
        $image
            .cropper('getCroppedCanvas', {
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {
                fd.append('cover_img',blob);
                // console.log(...fd);
                axios({
                    method: "POST",
                    url: '/my/article/add',
                    data: fd
                }).then(res => {
                    // console.log(res)
                    if (res.data.status !== 0) {
                        return layer.msg(res.data.message);
                    }
                    layer.msg('恭喜，添加成功！');
                    setTimeout(function () {
                    window.parent.document.querySelector("#art_list").click();
                    }, 1000);
                })
            })
    })
})